import React, { useState } from 'react';
import { 
  Breadcrumb, 
  Form, 
  Input, 
  Radio, 
  DatePicker, 
  Button, 
  Card,
  Space,
  Modal,
  Table,
  Image,
  Pagination
} from 'antd';
import styles from './PointsManagement.module.css';

function PointsManagement() {
  const [form] = Form.useForm();
  const [validityType, setValidityType] = useState('forever');
  const [productType, setProductType] = useState('all');
  const [isProductModalVisible, setIsProductModalVisible] = useState(false);

  // 模拟商品数据
  const productData = [
    {
      key: '1',
      image: '/path/to/image.jpg',
      name: '皮鞋清洗',
      price: 30,
      period: 10,
    },
    // ... more products
  ];

  const productColumns = [
    {
      title: '商品信息',
      dataIndex: 'name',
      render: (text, record) => (
        <Space>
          <Image
            width={40}
            src={record.image}
            preview={false}
          />
          {text}
        </Space>
      ),
    },
    {
      title: '价格（元）',
      dataIndex: 'price',
      align: 'center',
    },
    {
      title: '销量（单/月）',
      dataIndex: 'period',
      align: 'center',
    },
  ];

  const rowSelection = {
    type: 'checkbox',
    onChange: (selectedRowKeys, selectedRows) => {
      console.log('选中的商品：', selectedRows);
    },
  };

  const onFinish = (values) => {
    console.log('提交的值：', values);
  };

  return (
    <div className={styles.container}>
      <Breadcrumb className={styles.breadcrumb}>
        <Breadcrumb.Item>积分管理</Breadcrumb.Item>
      </Breadcrumb>

      <Form
        form={form}
        layout="horizontal"
        onFinish={onFinish}
        className={styles.form}
      >
        {/* 基础规则部分 */}
        <Card title="基础规则" className={styles.card}>
          <div className={styles.formRow}>
            <Form.Item
              label="最小抵扣单位"
              name="minUnit"
            >
              <Space>
                <Input placeholder="请输入" />
                <span>分</span>
              </Space>
            </Form.Item>

            <Form.Item
              label="1积分="
              name="pointValue"
            >
              <Space>
                <Input placeholder="请输入" />
                <span>元</span>
              </Space>
            </Form.Item>
          </div>

          <Form.Item
            label="积分有效期"
            name="validity"
          >
            <Space>
              <Radio.Group 
                value={validityType}
                onChange={(e) => setValidityType(e.target.value)}
              >
                <Radio value="forever">永久有效</Radio>
                <Radio value="limited">自获得之日起至</Radio>
              </Radio.Group>
              {validityType === 'limited' && (
                <>
                  
                  <DatePicker />
                  <span>有效果</span>
                </>
              )}
            </Space>
          </Form.Item>

          <div className={styles.formRow}>
            <Form.Item
              label="积分获取上限"
              name="maxPoints"
            >
              <Space>
                <Input placeholder="请输入" />
                <span>分</span>
              </Space>
            </Form.Item>

            <Form.Item
              label="积分获取下限"
              name="minPoints"
            >
              <Space>
                <Input placeholder="请输入" />
                <span>分</span>
              </Space>
            </Form.Item>
          </div>
        </Card>

        {/* 抵扣规则部分 */}
        <Card title="抵扣规则" className={styles.card}>
          <Form.Item
            label="抵扣商品"
            name="deductProduct"
          >
            <Radio.Group 
              value={productType}
              onChange={(e) => setProductType(e.target.value)}
            >
              <Space>
                <Radio value="all">全部商品</Radio>
                <Radio value="part">部分商品</Radio>
                {productType === 'part' && (
                  <Button type="link" onClick={() => setIsProductModalVisible(true)}>
                    选择商品
                  </Button>
                )}
              </Space>
            </Radio.Group>
          </Form.Item>

          <div className={styles.formRow}>
            <Form.Item
              label="抵扣上限"
              name="deductMax"
            >
              <Space>
                <Input placeholder="请输入" />
                <span>分</span>
              </Space>
            </Form.Item>

            <Form.Item
              label="抵扣下限"
              name="deductMin"
            >
              <Space>
                <Input placeholder="请输入" />
                <span>分</span>
              </Space>
            </Form.Item>
          </div>
        </Card>

        <Form.Item>
          <Button type="primary" htmlType="submit" className={styles.submitButton}>
            提交
          </Button>
        </Form.Item>
      </Form>

      {/* 选择商品模态框 */}
      <Modal
        title="选择商品"
        open={isProductModalVisible}
        onCancel={() => setIsProductModalVisible(false)}
        width={800}
        footer={[
          <Button key="cancel" onClick={() => setIsProductModalVisible(false)}>
            取消
          </Button>,
          <Button 
            key="submit" 
            type="primary"
            onClick={() => setIsProductModalVisible(false)}
          >
            确认
          </Button>
        ]}
      >
        <Table
          rowSelection={rowSelection}
          columns={productColumns}
          dataSource={productData}
          pagination={{
            total: 50,
            current: 1,
            pageSize: 6,
            size: 'small',
            showSizeChanger: false,
            showQuickJumper: false,
            itemRender: (page, type, originalElement) => {
              if (type === 'page') {
                return <Button size="small">{page}</Button>;
              }
              return originalElement;
            }
          }}
          className={styles.productTable}
        />
      </Modal>
    </div>
  );
}

export default PointsManagement;
